<template>
  <div class="basic_wrap">
    <div class="newTitle">
      <img src="@/assets/img/leftGray.png" class="backIcon" @click="$router.back()">
      <div class="title"></div>
    </div>
    <div class="cont">
      <div class="bIconT">邀请好友</div>
      <div class="qrcode" ref="qrCodeUrl"></div>
      <div class="infoRight" style="font-weight: bold" v-clipboard="()=>invite_code" v-clipboard:success="copy">
        邀请码:{{invite_code}}
        <img src="@/assets/img/copyIcon.png"  class="IRImg">
      </div>
      <div class="infoRight" style="font-weight: bold">邀请链接</div>
      <div class="infoRight" v-clipboard="()=>webUrl" v-clipboard:success="copy">
        {{webUrl || ''}}
        <img src="@/assets/img/copyIcon.png"  class="IRImg">
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Fetch from '../../utils/fetch'
import Clipboard from "v-clipboard";
import QRCode from 'qrcodejs2'
import {
  Icon,
  List,
  Empty,
  Popup
} from "vant";
Vue.use(Icon).use(Clipboard).use(List).use(Empty).use(Popup);
export default {
  name: "team",
  data() {
    return {
      invite_code:'',
      webUrl:''
    };
  },
  created() {
    this.$parent.footer('user', false);
  },
  mounted() {
     this.getDeatil()
  },
  methods:{
    copy() {
      this.$toast(this.$t('recharge.copySuccess'));
    },
    creatQrCode(str) {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: str, // 需要转换为二维码的内容
        width: 186,
        height: 186,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    getDeatil(){
      let domain = localStorage.getItem("domain");
      Fetch('/user/info',{
        isapp: 0
      }).then((r) => {
        this.invite_code = r.data.invite_code
        this.webUrl = domain + '/#/register?code=' + r.data.invite_code
        // http://192.168.2.116:8080/#/register
        this.creatQrCode(this.webUrl)
      });
    },
  },
};
</script>

<style lang="less" scoped>
   .basic_wrap{
     background-image: url(../../assets/img/otherBac.png);
     background-size: cover;
     background-position: center top;
     min-height: 100vh;
     width: 100vw;
     box-sizing: border-box;
     .newTitle{
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       .backIcon{
         position: absolute;
         top: 50%;
         left: 20px;
         transform: translate(-50%,-50%);
         width: 16px;
         height: 16px;
       }
       .title{
         font-size: 16px;
         font-weight: bold;
       }
     }
     .cont{
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       .bIconImg{
         width: 50px;
         height: 50px;
         margin-top: 40px;
       }
       .bIconT{
         font-size: 24px;
         font-weight: bold;
         margin: 80px 0;
       }
       .myDree{
         color: #707070;
         margin-bottom: 12px;
       }
       .myDreeNum{
         color: #707070;
         margin-bottom: 66px;
       }
       .qrcode{
         padding:8px;
         background: #ffffff;
         border-radius: 8px;
       }
       .infoRight{
         margin-top: 15px;
         display: flex;
         font-size: 14px;
         .IRImg{
           width: 16px;
           height: 16px;
           margin-left: 5px;
         }
       }
     }
   }
</style>
